<template>
    <div class="rate">
        <img
            v-for="item in 5"
            @click="clickItem(item)"
            :src="starIndex >= item ? imgUrlSelect : imgUrl" alt="">
    </div>
</template>
<script setup lang="ts">
    /* 
        vue3 更倾向于 模块化开发，
        让功能 实现 按需加载，
        不像vue2 一样，
        把所有的东西都加载并且监听;
    */
    /* 
        vue3 setup接收使用 defineProps 接收 父组件传值
    */
    //    数组写法
    // const props = defineProps(['starIndex','imgUrlSelect','imgUrl'])
    // 对象写法
    // const props = defineProps({
    //     starIndex: {
    //         type: Number,
    //         default: 1
    //     },
    //     imgUrlSelect: {
    //         type: String
    //     },
    //     imgUrl:{
    //         type: String
    //     }
    // })

    // TS 对象写法
    // const props = defineProps<{
    //     starIndex: number,
    //     // 带有 ? 证明 这是一个 泛型语法
    //     imgUrlSelect?: string,
    //     imgUrl: string
    // }>();

    interface Props{
        starIndex: number,
        // 带有 ? 证明 这是一个 泛型语法
        imgUrlSelect?: string,
        imgUrl: string
    }

    const props = defineProps<Props>();

    // 子组件自定义事件 需要通过 defineEmits 提前定义 事件名
    // const emit = defineEmits(['change'])
    // 使用TS定义 emit
    const emit = defineEmits<{
        /* 
            如果自定义的change事件 想要传递参数 必须 定义参数的类型
        */
        change: [item:number]
    }>()
    // 使用TS 定义 函数
    function clickItem(item:number):void{
        // 访问接受的参数 需要通过props接收
        // 需要通知给父组件 让父组件修改
        // 调用 自定义事件方法
        emit('change',item)
    }
</script>
<style>
    img{
            width: 30px;
        }
</style>